// 鼠标事件--拖拽，放入棋盘
let drawImg = null
let bgdiv = document.querySelector('#bgdiv')
let md = false
let type = 0
function getPlants(dom) {
    // 生成对应的载种植物
}

// 鼠标移动
function mousemove (ev) {
    // drawImg.style.cursor = 'move'
    drawImg.style.left = ev.pageX - drawImg.offsetLeft + parseInt(getComputedStyle(drawImg)['left']) - 50 + 'px'
    drawImg.style.top = ev.pageY - drawImg.offsetTop + parseInt(getComputedStyle(drawImg)['top'])-60 + 'px'
    if(ev.clientX > 265 && ev.clientX < 1000  && ev.clientY > 100 && ev.clientY < 577){
        for(let i=0;i<9;i++){
            if((i===8 && ev.clientX > locationX[i])||(ev.clientX > locationX[i] && ev.clientX < locationX[i+1])){
                for(let j=0;j<5;j++){
                    if((j===4 && ev.clientY > locationY[j])||(ev.clientY > locationY[j] && ev.clientY < locationY[j+1])){
                        document.querySelector('#div'+i+''+j).animate([{opacity:1},{opacity:0}],keyframesOptions)
                        window.addEventListener('mouseup',mouseup)
                    }
                }
            }
        }
    }else{
        // drawImg.style.cursor = 'no-drop'
        window.addEventListener('mouseup',mouseup)
    }
}

// 鼠标抬起
function mouseup (ev) {
    ev.preventDefault()
    if(ev.clientX > 265 && ev.clientX < 1000  && ev.clientY > 100 && ev.clientY < 577){
        window.removeEventListener('mousemove',mousemove,false)
        window.removeEventListener('mouseup',mouseup,false)
        for(let i=0;i<9;i++){
            if((i===8 && ev.clientX > locationX[i])||(ev.clientX > locationX[i] && ev.clientX < locationX[i+1])){
                for(let j=0;j<5;j++){
                    if((j===4 && ev.clientY > locationY[j])||(ev.clientY > locationY[j] && ev.clientY < locationY[j+1])){
                        let dom = document.querySelector('#div'+i+j) //获取棋盘位置，用于种植植物
                        drawImg.remove() //删除跟随鼠标移动的图片
                        
                        // 该位置标记为已经种植
                        checkboard.forEach(item=>{
                            if(item.id === 'div'+i+j){
                                if(item.isHave){
                                    drawImg.remove()
                                }else{
                                    item.isHave = true
                                    // 种植对应类型植物
                                    new Plants({x:parseInt(dom.style.left),y:parseInt(dom.style.top),id:type,type:parseInt(type)}).draw()
                                }
                            }
                        })
                    }
                }
            }
        }
    }else{
        drawImg.remove()
        window.removeEventListener('mousemove',mousemove,false)
        window.removeEventListener('mouseup',mouseup,false)
    }
}

// 鼠标按下
function mousedown (e) {
    e.preventDefault()
    let opacityMoveImg = null
    let nowTime = new Date().getTime()
    type = e.target.getAttribute('type')
    // 获取植物图片，并跟随鼠标移动
    if(!type) return
    let name = plantsType[type].name
    let img = new Image()
    img.src = plantsType[type].path
    img.id = `moveImg${type+nowTime}`
    img.style.position = 'absolute'
    img.style.width = '70px'
    img.style.left = e.clientX - 50  + 'px'
    img.style.top =e.clientY - 60 + 'px'
    bgdiv.appendChild(img)
    drawImg = document.querySelector(`#moveImg${type+nowTime}`)

    window.addEventListener('mousemove',mousemove)
}

// 鼠标释放事件
window.addEventListener('mousedown',mousedown)
